<template>
  <div class="report_analysis">
    <div class="report_analysis_title">
      <el-date-picker
          v-model="num"
          type="year"
          placeholder="选择年"
          format="yyyy 年"
          value-format="timestamp"
          size="mini"
          @change="handleChange">
      </el-date-picker>
    </div>
    <div class="report_analysis_body">
      <el-row style="background:#fff;padding:.5rem .5rem 0;margin-bottom:1rem;">
        <line-chart :chart-data="lineChart" />
      </el-row>

      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card shadow="always" class="chart-wrapper">
            <raddar-chart :chart-data="radarChart"/>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card shadow="always" class="chart-wrapper">
            <pie-chart :chart-data="pieChart"/>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card shadow="always" class="chart-wrapper">
            <bar-chart :chart-data="barChart"/>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card shadow="always" class="chart-wrapper">
            <h-line-chart :chart-data="hLineChart"/>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card shadow="always" class="chart-wrapper">
            <sun-chart />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card shadow="always" class="chart-wrapper">
            <circle-chart :chart-data="circleChart"/>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import PieChart from "@/components/application/component/analysis/PieChart";
import LineChart from "@/components/application/component/analysis/LineChart";
import BarChart from "@/components/application/component/analysis/BarChart";
import RaddarChart from "@/components/application/component/analysis/RaddarChart";
import Keyboard from "@/components/application/component/analysis/Keyboard";
import SunChart from "@/components/application/component/analysis/SunChart";
import HLineChart from "@/components/application/component/analysis/HLineChart";
import CircleChart from "@/components/application/component/analysis/CircleChart";

import { getLineCharts, getPieChartInit, getRadarChartInit, getBarChartInit } from "@/api/Statistics";

export default {
name: "ReportAnalysis",
  components: {CircleChart, HLineChart, SunChart, Keyboard, RaddarChart, BarChart, LineChart, PieChart},
  data(){
    return{
      num: new Date(),
      radarChart: {
        entity: [
          {value: 1048, name: '搜索引擎'},
          {value: 735, name: '直接访问'},
          {value: 580, name: '邮件营销'},
          {value: 484, name: '联盟广告'},
          {value: 300, name: '视频广告'}
        ],
      },

      lineChart: {
        expectedData: [100, 120, 161, 134, 105, 160, 165, 155, 190, 111, 122, 200],
      },

      hLineChart: {
        expectedData: [1000, 1200, 1610, 1340, 1050, 1600, 1650, 1550, 1900, 1110, 1220, 2000],
        actualData: [1200, 820, 910, 1540, 1620, 1400, 1450, 110, 200, 500, 220, 304]
      },

      pieChart: {
        entity: [
          { value: 320, name: '抵押' },
          { value: 240, name: '拍卖' },
          { value: 149, name: '出售' },
          { value: 222, name: '课税' },
          { value: 123, name: '了解市场' },
          { value: 456, name: '征收' },
          { value: 111, name: '租赁' },
        ],

        header: ['抵押', '拍卖', '出售', '课税', '了解市场', '征收', '租赁'],
      },

      barChart: {
        name: ['比较法','逼近法','成本法','收益法','剩余法', '还原法'],
        value: [122,134,223,123,231,312]
      },

      circleChart: {
        legendData: ['李淼华', '周晨慧','丁颖', '肖荣升','朱航浪','李丽'],
        seriesData: [
          {
            name: '李淼华',
            value: 1000
          },
          {
            name: '周晨慧',
            value: 800
          },
          {
            name: '丁颖',
            value: 700
          },
          {
            name: '肖荣升',
            value: 700
          },
          {
            name: '朱航浪',
            value: 600
          },
          {
            name: '李丽',
            value: 500
          },
        ]
      },

      sunChart: {},
    }
  },

  created() {
    var num = this.num;
    var time = num.getTime();
    this.init(time)
  },

  methods: {
    handleChange(val){
      this.init(val)
    },

    init(time){
      this.initLineChart(time)
      this.initPieChart(time)
      this.initRadarChart(time)
      this.initBarChart(time)
    },

    initLineChart(time){
      getLineCharts(time).then(res => {
        var data = res.data;
        this.filterTimeList(data)
      }).catch().finally(() => {

      })
    },

    initPieChart(time){
      getPieChartInit(time).then(res => {
        // var data = res.data;
        // this.pieChartFilter(data)
        var data = res.data;
        var pieChart = {
          entity: [],
          header: []
        }
        pieChart.entity = data
        for (let i = 0; i < data.length; i++) {
          pieChart.header.push(data[i].name)
        }

        this.pieChart = pieChart

        // this.$store.commit('setPieChart', pieChart)

      }).catch().finally()
    },

    initRadarChart(time){
      getRadarChartInit(time).then(res => {
        var radarChart = {
          entity: []
        }
        radarChart.entity = res.data

        this.radarChart = radarChart

        // this.$store.commit('setRadarChart', radarChart)
      }).catch().finally()
    },

    initBarChart(time){
      getBarChartInit(time).then(res => {
        var data = res.data;
        var barChart = {
          name: [],
          value: []
        }

        // console.log(data)

        for (let i = 0; i < data.length; i++) {
          barChart.name.push(data[i].name)
          barChart.value.push(data[i].value)
        }

        this.barChart = barChart

        // this.$store.commit('setBarChart', barChart)
      }).catch().finally()
    },

    compare(attr) {
      return function(a,b){
        var val1 = a[attr];
        var val2 = b[attr];
        return val1 - val2;
      }
    },

    pieChartFilter(data){
      this.pieChart.header = []
      this.pieChart.entity = []
      for (let i = 0; i < data.length; i++) {
        var objectiveName = data[i].name;
        this.pieChart.header.push(objectiveName)
      }
      for (let i = 0; i < data.length; i++) {
        var datum = data[i];
        this.pieChart.entity.push(datum)
      }
    },

    filterTimeList(data){
      // 根据month排序
      var type = 'month'
      data.sort(this.compare(type));
      console.log(data)
      var lineChart = {
        expectedData: []
      }
      for (let i = 0; i < data.length; i++) {
        lineChart.expectedData.push(data[i].num)
      }

      console.log(lineChart)
      this.lineChart = lineChart

      // this.$store.commit('setLineChart', lineChart);
    },
  }
}
</script>

<style scoped>
.report_analysis{
  padding: 1rem;
}
.report_analysis_title{
  /*border: 1px solid black;*/
}
.report_analysis_body{
  /*overflow: hidden;*/
  width: 100%;
  /*border: 1px solid black;*/
}

.chart-wrapper {
  background: #fff;
  padding: .5rem .5rem 0;
  margin-bottom: 2rem;
  border-radius: 1rem;
}
</style>